<template>
	<view class="container">
		
		<view class="on-line-help">
			<text>在线帮助</text>
		</view>
		<view class="line"></view>
		<view class="item_layout" hover-class="item-hover" hover-stay-time="50" @tap="onSubmitFault">
			<text>提交故障</text>
			<image class="right-image" src="/static/images/right.png" mode=""></image>
		</view>
		<view class="line"></view>
		<view class="item_layout" hover-class="item-hover" hover-stay-time='50' @tap="onCommonProblem">
			<text>常见问题</text>
			<image class="right-image" src="/static/images/right.png" mode=""></image>
		</view>
		<view class="line"></view>

		<view class="item_layout" hover-class="item-hover" hover-stay-time='50' @tap="onCallService">
			<view>
				<text>报障电话</text>
				<text class="telephoen">{{servicePhone}}</text>				
			</view>
			<image class="right-image" src="/static/images/right.png" mode=""></image>
		</view>

		
	</view>
</template>

<script>
	import apis from '../../api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex' //导入vuex的mapState和mapMutations方法
	
	export default {
		data() {
			return {
				servicePhone:'0768-5822729',
			}
		},
		onLoad(option) {
			this.getServicePhone();
		},
		methods: {
			onSubmitFault(){	
				let that=this;
				that.servicePhone=this.servicePhone;
				uni.navigateTo({
					url: './repaire-submit-fault/repaire-submit-fault?servicePhone='+that.servicePhone,
				})
			},
			onCommonProblem(){
				uni.navigateTo({
					url: './repaire-common-problem/repaire-common-problem',
				})
			},
			onCallService(){
				uni.makePhoneCall({
				    phoneNumber: this.servicePhone //仅为示例
				})			
			},
			getServicePhone(){
				apis.Hotline({}).then(res=>{
					//console.log(res);
					if(res[1].data.status==200)
					{
						if(res[1].data.message && res[1].data.message.length >= 7){
							this.servicePhone=res[1].data.message;
						}
					}																				
				})
			}
			
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
		font-size: 32rpx;
	}
	.on-line-help{
		width: calc(100% - 20rpx);
		padding: 0rpx 20rpx 0rpx 20rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		
		color: #black;
		font-size: 34rpx;
		font-weight: bold;
	}
/* 	.line{
		width: 100%;
		height: 1rpx;
		background-color: #F1F1F1;
	} */
	.right-image{
		width: 40rpx;
		height: 40rpx;
	}
	.telephoen{
		margin-left: 20rpx;
	}
	.item_layout{
		width: calc(100% - 20rpx);
		height: 90rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 34rpx;
		//font-weight: bold;
		background-color: white;		
	}
	.item-hover{
	  background-color: #e3e3e5;
	}

</style>
